<template>
  <div>
    <div v-show="!showChangeDepartment">
      <jxf-titletip :title="title" @refreshPage="refreshPage"></jxf-titletip>
      <el-card class="mt20">
        <div slot="header">
          <span><i class="el-icon-search"></i> 筛选查询</span>
        </div>
        <div>
          <el-form :inline="true" :model="searchInfo" ref="searchForm" class="demo-form-inline" @submit.native.prevent>
            <el-form-item label="部门名称:" prop="name">
              <el-input v-model="searchInfo.name" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header">
          <span><i class="el-icon-rank"></i> 数据列表</span>
          <el-button style="float: right;  padding: 5px 10px" type="primary" @click="showAddDepartment = true">新增</el-button>
        </div>
        <jxf-table :table="tableInfo">
          <template slot="status" slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              @change="changeStatus(scope.row)">
            </el-switch>
          </template>
          <template slot="operation" slot-scope="scope">
            <el-button @click="changeDepartment(scope.row)" type="text" size="small">权限设置</el-button>
            <el-button @click="editDepartment(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
      <AddDepartment :showAddDepartment.sync="showAddDepartment" @refreshDepartmentList = "getDepartmentList"></AddDepartment>
      <EditDepartment :showEditDepartment.sync="showEditDepartment" :defaultInfo="rowInfo" @refreshDepartmentList = "getDepartmentList"></EditDepartment>
    </div>
    <ChangeDepartment ref="ChangeDepartment" v-show="showChangeDepartment" :showChangeDepartment.sync="showChangeDepartment"></ChangeDepartment>
  </div>
</template>

<script>
  import formatDate from '@/assets/js/formatDate'
  import AddDepartment from './components/AddDepartment'
  import EditDepartment from './components/EditDepartment'
  import ChangeDepartment from './components/ChangeDepartment'
  export default {
    name: "DepartmentManagement",
    components: {AddDepartment,EditDepartment,ChangeDepartment},
    data() {
      return {
        title: "部门管理",
        searchInfoBack: {
          name: ""
        },
        searchInfo: {...this.searchInfoBack},
        tableInfo:{},
        pageTotal: 0,
        currentPage: 1,
        pageSize:10,
        showAddDepartment:false,
        showEditDepartment:false,
        rowInfo:null,
        // 权限设置
        showChangeDepartment:false
      }
    },
    methods: {
      // 表单初始化
      init() {
        this.tableInfo = {
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '部门名称',
              minWidth: '140',
              prop: 'name'
            },
            {
              id: '2',
              label: '职能描述',
              minWidth: '140',
              prop: 'remark'
            },
            {
              id: '3',
              label: '成员数量',
              prop: 'peCount'
            },
            {
              id: '4',
              label: '添加时间',
              width: '160',
              prop: 'createTime'
            },
            {
              id: '5',
              label: '是否启用',
              show: 'template',
              prop: 'status'
            },
            {
              id: '6',
              label: '操作',
              prop: 'operation',
              show: 'template',
              width: "160",
              fixed: "right"
            }
          ],
          data: []
        }
      },
      getDepartmentList() {
        let info = {...this.searchInfo, pageNum: this.currentPage, pageSize: this.pageSize}
        ajax.post(apis.auth.getDepartmentList, info)
          .then(res => {
            if (res.success === true) {
              this.pageTotal = res.data.total
              if (res.data.dataList !== [] && res.data.dataList !== null) {
                this.tableInfo.data = this.formatData(res.data.dataList)
              } else {
                this.tableInfo.data = []
              }
              this.tableInfo.loading = false
            }
          })
      },
      formatData(list) {
        return list.map(item => {
            return {
              id:item.id,
              name:item.name,
              peCount:item.peCount,
              remark:item.remark,
              createTime:formatDate.timeFormat(item.createTime),
              status:item.status === 1 ? true : false // 1 为启用 0为禁用
            }
          }
        )
      },
      // 禁用、启用
      changeStatus(row){
        let text = row.status === true ? '确定启用？' : '确定禁用？'
        this.$confirm(text, '提示', {
          type: 'warning'
        }).then(() => {
          ajax.post(apis.auth.updateDepartment, {id: row.id, status: row.status ? 1 : 0})
            .then(res => {
              if (res.success === true) {
                this.$message({
                  message: res.message,
                  type: 'success'
                });
              } else {
                row.status = !row.status
                this.$message({
                  message: res.message,
                  type: 'error'
                });
              }
            })
        }).catch(() => {
          row.status = !row.status
        })
      },
      // 编辑
      editDepartment(row){
        this.showEditDepartment = true
        this.rowInfo = {
          id: row.id,
          name:row.name,
          remark:row.remark
        }
      },
      // 权限设置
      changeDepartment(row){
        this.showChangeDepartment = true
        this.$refs.ChangeDepartment.getPropertyInfo(row)
      },
      onSearch() {
        this.currentPage = 1
        this.getDepartmentList()
      },
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getDepartmentList()
      },
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getDepartmentList()
      },
      refreshPage() {
        this.searchInfo = {...this.searchInfoBack}
        this.currentPage = 1
        this.pageSize = 10
        this.getDepartmentList()
      }
    },
    created() {
      this.init()
      this.getDepartmentList()
    }
  }
</script>

<style lang="scss" scoped>

</style>

